<script setup lang="ts">
import { computed, inject, onMounted, ref } from "vue";
import type { Ref } from "vue";
import type { GoodDetail } from "@/types/detailTypes/detailTypes.ts";
import Message from "@/views/detail/components/tabs/components/Message/Message.vue";
import Evaluate from "@/views/detail/components/tabs/components/Evaluate/Evaluate.vue";


const activeName = ref<string>("Message");

const isMessage = computed<string>(() => activeName.value === "Message");

const isEvaluate = computed<string>(() => activeName.value === "Evaluate");

const goodDetail = inject<Ref<GoodDetail>>("goodDetail");


const changeActive = (active: string) => {
   activeName.value = active;
};


</script>

<template>
   <div class="tabs">
      <!--tab栏-->
      <nav>
         <a :class="{active:isMessage}" @click="changeActive('Message')">商品详情</a>
         <a :class="{active:isEvaluate}" @click="changeActive('Evaluate')">商品评价<span>({{ goodDetail!.commentCount }})</span></a>
      </nav>
      <!-- 切换内容(动态组件) -->
      <keep-alive>
         <component :is="activeName==='Message'?Message:Evaluate"></component>
      </keep-alive>
   </div>
</template>

<style scoped lang="less">
.tabs {
   min-height: 600px;
   background: #fff;

   nav {
      height: 70px;
      line-height: 70px;
      display: flex;
      border-bottom: 1px solid #f5f5f5;

      a {
         padding: 0 40px;
         font-size: 18px;
         position: relative;

         > span {
            color: @priceColor;
            font-size: 16px;
            margin-left: 10px;
         }

         &:first-child {
            border-right: 1px solid #f5f5f5;
         }

         &.active {
            &::before {
               content: "";
               position: absolute;
               left: 50%;
               transform: translateX(-50%);
               bottom: -1px;
               width: 72px;
               height: 2px;
               background: @xtxColor;
            }
         }
      }
   }
}
</style>
